<template>
	<view>
		<u--input
			v-if="disabled || !writable"
		  :prefixIcon="'clock'"
			border="bottom"
			disabled
			:placeholder="placeholder"
			:clearable="clearable"
			v-model="text"
		></u--input>
		
		<view @tap="show = true" v-else class="time-view">
			<view :class="text ? 'inherit' : 'prs'">{{ text || placeholder }}</view>
			<view>
				<!-- <image v-show="clearable && val" style="width: 36rpx;height: 36rpx;" src="../static/img/close.png"></image> -->
				<u-icon
				  v-show="clearable && text"
				  name="close-circle-fill"
				  size="20"
				  color="#c0c4cc"
				  @click.native.stop="clearData"
				></u-icon>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view v-show="required && validator" class="requiredMessage">{{ requiredMessage }}</view>
		
		<custom-cascader
			v-model="show"
			:title="placeholder" 
			:fieldNames="defaultProps"
			:options="options"
			:defaultSelected="selectedArr"
			@confirm="cascaderConfim"
		/>
	</view>
</template>

<script>
import customCascader from '../custom-cascader/custom-cascader.vue'
export default {
	data() {
		return {
			show: false,
			selectedArr: [],
			text: '',
			validator: false
		};
	},
	components: { customCascader },
	props: {
		value:{
			type: Array,
			default: () => []
		},
		placeholder:{ // 占位符
			type: String,
			default: ""
		},
		options: {
			type: Array,
			default: () => []
		},
		defaultProps: {
			type: Object,
			default: () => ({ label: 'label', value: 'value', children: 'children' })
		},
		disabled: {
			type: Boolean,
			default: false
		},
		writable: {
			type: Boolean,
			default: true
		},
		clearable:{
			type: Boolean,
			default: false
		},
		required: {
			type: Boolean,
			default: false
		},
		requiredMessage: {
			type: String,
			default: ''
		}
	},
	computed: {
		validateStatus() {
			return this.$store?.state?.validate?.status || false
		}
	},
	watch: {
		value: {
			handler () {
				this.selectedArr = this.value
			},
			immediate: true,
			deep: true
		},
		validateStatus() {
			if(this.validateStatus && this.required) {
				if(!this.selectedArr.length) {
					this.validator = true
				} else {
					this.validator = false
				}
			}
		},
		selectedArr: {
			handler () {
				if(this.validateStatus && this.required) {
					if(!this.selectedArr.length) {
						this.validator = true
					} else {
						this.validator = false
					}
				}
				this.getLabel()
			},
			immediate: true
		}
	},
	methods: {
		// 级联选中
		cascaderConfim(values) {
			// this.selectedArr = values
			this.$emit('input', values)
			// this.getLabel()
		},
		// 清除
		clearData() {
			if(!this.clearable || !this.text) {
				return
			}
			this.text = ''
			this.selectedArr = []
			this.$emit('input', this.selectedArr)
		},
		getLabel() {
			const texts = []
			if(this.selectedArr.length) {
				let list = this.flatTree(this.options)
				list.forEach(item => {
					if(this.selectedArr.indexOf(item[this.defaultProps.value]) >= 0) {
						texts.push(item[this.defaultProps.label])
					}
				})
			}
			this.text = texts.join(' / ')
		},
		flatTree(tree) {
			const target = []
			tree.forEach(item => {
				const o = JSON.parse(JSON.stringify(item))
				if(o[this.defaultProps.children]) delete o[this.defaultProps.children]
				target.push(o)
				if(item?.[this.defaultProps.children]?.length) {
					target.push(...this.flatTree(item[this.defaultProps.children]))
				}
			})
			return target
		}
	}
}
</script>

<style scoped>
.requiredMessage {
	width: 100%;
	height: 50rpx;
	line-height: 50rpx;
	color: #f56c6c;
	font-size: 22rpx;
}

.time-view {
	width: 100%;
	height: 60rpx;
	border-bottom: 1px solid #dadbde;
	border-radius: 8rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 5rpx;
	box-sizing: border-box;
}

.time-view view:nth-of-type(1) {
	font-size: 28rpx;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.time-view view:nth-of-type(2) {
	display: flex;
	align-items: center;
}

.inherit {
	color: inherit;
}

.prs {
	color: rgb(192, 196, 204);
}
</style>